<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05CSS层级权重的比较</title>
    <style>
        .box {
            /*
                权重  10000 
             */
            color: blue !important;
        }

        /* 
            权重 ： 
                类选择器，属性选择器，伪类选择器  ：10 
                元素选择器，伪元素选择器 ： 1
        */
        div.box {
            color: pink;
        }

        /* 
            权重 ：1000
                id 选择器 ： 100
         */
        #box-one {
            color: aquamarine;
        }
    </style>
</head>

<body>
    <!-- 
        内联样式 ： 权重 1000 
    -->
    <div class="box one two" id="box-one" style="color: blueviolet;">我是一个盒子</div>
</body>

</html>